/**
 * create by young (young2f@outlook.com) on 2020/9/19
 */

'use strict';
import React, {Component} from 'react';
import {Form, PageHeader, Tag, Tooltip} from 'antd';

const _theme = require('../../theme');

class ViewTitle extends Component {
  constructor(props) {
    super(props);
  }

  getLevelColor = level => {
    switch (level) {
      case 2:
        return _theme['primary-color-1'];
      case 3:
        return _theme['primary-color-2'];
      default:
        return _theme['primary-color'];
    }
  };

  render() {
    const {title, desc, subTitle, actions, tags, level, style, className} = this.props;
    let color = level ? this.getLevelColor(level) : _theme['primary-color'];
    const _title = desc ? <Tooltip title={desc}>
      <span>{title}</span>
    </Tooltip> : title;
    return (
      <Form>
        <PageHeader
          style={{...style}}
          title={_title}
          subTitle={subTitle}
          extra={actions}
          tags={tags}
          backIcon={false}
          className={className}
          avatar={
            {
              style: {backgroundColor: color, marginTop: '9px'},
              size: 16,
              shape: 'line'
            }
          }
        >
        </PageHeader>
      </Form>
    );
  }
}

export default ViewTitle;
